<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--360浏览器优先以webkit内核解析-->
    <title>概览</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
    <link href="../static/css/style.min.css" th:href="@{/css/style.min.css}" rel="stylesheet"/>
</head>

<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-3">
            <div class="ibox">
                <div class="ibox-content" style="background-color: #17a2b8!important">
                    <h3 style="color: #fff!important">今日总客流</h3>
                    <h1 style="color: #fff!important" class="no-margins" id="todaynum1">0</h1>
                    <div style="color: #fff!important" class="stat-percent font-bold text-navy" id="todayrate1"></div>
                    <small style="color: #fff!important">较昨日</small>
                </div>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="ibox">
                <div class="ibox-content"  style="background-color: #28a745!important">
                    <h3 style="color: #fff!important">去重客流</h3>
                    <h1 style="color: #fff!important" class="no-margins" id="todaynum2">0</h1>
                    <div style="color: #fff!important" class="stat-percent font-bold text-navy" id="todayrate2"></div>
                    <small style="color: #fff!important">较昨日</small>
                </div>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="ibox">
                <div class="ibox-content"  style="background-color: #ffc107!important">
                    <h3 style="color: #1f2d3d!important">重复客流</h3>
                    <h1 style="color: #1f2d3d!important" class="no-margins" id="todaynum3">0</h1>
                    <div style="color: #1f2d3d!important" class="stat-percent font-bold text-danger" id="todayrate3"></div>
                    <small style="color: #1f2d3d!important">较昨日</small>
                </div>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="ibox">
                <div class="ibox-content"  style="background-color: #dc3545!important">
                    <h3 style="color: #fff!important">经过客流</h3>
                    <h1 style="color: #fff!important" class="no-margins" id="todaynum4">0</h1>
                    <div style="color: #fff!important" class="stat-percent font-bold text-danger" id="todayrate4"></div>
                    <small style="color: #fff!important">较昨日</small>
                </div>
            </div>
        </div>

    </div>

</div>
<div class="col-sm-12">
    <div class="row">
        <div class="col-sm-8">
            <div class="row">
                <div class="col-sm-12">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <h5>客流量趋势</h5>
                            <div class="ibox-tools">
                                <span id="daykl" onclick="do_query_daykl(this)" style="cursor: pointer"
                                      class="label label-primary">今日</span>
                                <span id="monthkl" onclick="do_query_monthkl(this)" style="cursor: pointer"
                                      class="label">本月</span>
                            </div>
                        </div>
                        <div class="ibox-content">
                            <div class="echarts" id="echarts-bar-chart" style="height: 320px"></div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>客群画像 </h5>
                    <div class="ibox-tools">
                        <span id="dayhx" onclick="do_query_dayhx(this)" style="cursor: pointer"
                              class="label label-primary">今日</span>
                        <span id="monthhx" onclick="do_query_monthhx(this)" style="cursor: pointer"
                              class="label">本月</span>
                    </div>
                </div>
                <div class="ibox-content">
                    <div class="row">
                        <div class="col-sm-6">
                            <div class="echarts " id="echarts-hx1-chart"  style="height: 320px"></div>
                        </div>
                        <div class="col-sm-6">
                            <div class="echarts" id="echarts-hx2-chart"  style="height: 320px"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
            </div>
        </div>
        <div class="col-sm-4">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>客流量TOP10</h5>
                    </div>
                    <div class="ibox-content">
                        <div class="echarts" id="echarts-top10-chart" style="min-height: 740px;"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<script th:src="@{/ajax/libs/layer/layer.min.js}"></script>
<th:block th:include="include :: echarts-js"/>
<th:block th:include="include :: footer"/>
<script type="text/javascript">
    var barChart = echarts.init(document.getElementById("echarts-bar-chart"), 'light');
    var hx1Chart = echarts.init(document.getElementById("echarts-hx1-chart"), 'light');
    var hx2Chart = echarts.init(document.getElementById("echarts-hx2-chart"), 'light');
    var top10Chart = echarts.init(document.getElementById("echarts-top10-chart"), 'light');

    $(function () {

        $(window.parent.document).find("select[name='deptId']").change(function (){
            initDay2data();
            do_query_daykl();
            do_query_dayhx();
            do_query_top10();
        });
        initDay2data();
        do_query_daykl();
        do_query_dayhx();
        do_query_top10();

    });

    function initDay2data(){
        var deptId = $(window.parent.document).find("select[name='deptId']").val();
        $.ajax({
            cache: true,
            type: "POST",
            url: ctx + "sts/data/detail/day2data",
            data: {
                "deptId2": deptId,
            },
            error: function (request) {
                $.modal.alertError("系统错误");
            },
            success: function (data) {
                if (data.todayData) {
                    var todaynum1 = data.todayData.inNum;
                    var todaynum2 = data.todayData.inNum - data.todayData.repNum;
                    var todaynum3 = data.todayData.repNum;
                    var todaynum4 = data.todayData.passNum;
                    $("#todaynum1").text(todaynum1);
                    $("#todaynum2").text(todaynum2);
                    $("#todaynum3").text(todaynum3);
                    $("#todaynum4").text(todaynum4);
                    if (data.yesterdayData) {
                        var yesterdaynum1 = data.yesterdayData.inNum;
                        var yesterdaynum2 = data.yesterdayData.inNum - data.todayData.repNum;
                        var yesterdaynum3 = data.yesterdayData.repNum;
                        var yesterdaynum4 = data.yesterdayData.passNum;
                        if (todaynum1 > yesterdaynum1 && yesterdaynum1 > 0) {
                            var rate = (((todaynum1 - yesterdaynum1) / yesterdaynum1) * 100).toFixed(0)
                            $("#todayrate1").html(rate + '%↑');
                        } else if (todaynum1 < yesterdaynum1 && yesterdaynum1 > 0) {
                            var rate = (((yesterdaynum1 - todaynum1) / yesterdaynum1) * 100).toFixed(0)
                            $("#todayrate1").html(rate + '%↓');
                        } else {
                            $("#todayrate1").html('0%↑');
                        }

                        if (todaynum2 > yesterdaynum2 && yesterdaynum2 > 0) {
                            var rate = (((todaynum2 - yesterdaynum2) / yesterdaynum2) * 100).toFixed(0)
                            $("#todayrate2").html(rate + '%');
                        } else if (todaynum2 < yesterdaynum2 && yesterdaynum2 > 0) {
                            var rate = (((yesterdaynum2 - todaynum2) / yesterdaynum2) * 100).toFixed(0)
                            $("#todayrate2").html(rate + '%↓');
                        } else {
                            $("#todayrate2").html('0%↑');
                        }


                        if (todaynum3 > yesterdaynum3 && yesterdaynum3 > 0) {
                            var rate = (((todaynum3 - yesterdaynum3) / yesterdaynum3) * 100).toFixed(0)
                            $("#todayrate2").html(rate + '%↑');
                        } else if (todaynum3 < yesterdaynum3 && yesterdaynum3 > 0) {
                            var rate = (((yesterdaynum3 - todaynum3) / yesterdaynum3) * 100).toFixed(0)
                            $("#todayrate3").html(rate + '%↓');
                        } else {
                            $("#todayrate3").html('0%↑ <i class="fa fa-bolt"></i>');
                        }

                        if (todaynum4 > yesterdaynum4 && yesterdaynum4 > 0) {
                            var rate = (((todaynum4 - yesterdaynum4) / yesterdaynum4) * 100).toFixed(0)
                            $("#todayrate4").html(rate + '%↑ <i class="fa fa-bolt"></i>');
                        } else if (todaynum4 < yesterdaynum4 && yesterdaynum4 > 0) {
                            var rate = (((yesterdaynum4 - todaynum4) / yesterdaynum4) * 100).toFixed(0)
                            $("#todayrate4").html(rate + '%↓ <i class="fa down"></i>');
                        } else {
                            $("#todayrate4").html('0%↑ <i class="fa fa-bolt"></i>');
                        }
                    }else{
                        $("#todayrate1").html('0%↑ <i class="fa fa-bolt"></i>');
                        $("#todayrate1").html('0%↑ <i class="fa fa-bolt"></i>');
                        $("#todayrate3").html('0%↑ <i class="fa fa-bolt"></i>');
                        $("#todayrate4").html('0%↑ <i class="fa fa-bolt"></i>');
                    }
                }else{
                    $("#todaynum1").text(0);
                    $("#todaynum2").text(0);
                    $("#todaynum3").text(0);
                    $("#todaynum4").text(0);
                }
            }
        });
    }

    function do_query_top10() {
        var date = $.common.dateFormat(new Date(), "yyyy-MM-dd");
        var dateFormat = "%Y-%m-%d";
        $.ajax({
            cache : true,
            type : "POST",
            url : ctx + "sts/data/detail/statisticTop10",
            data : {
                "deptIdAttr": "dept_id2",
                "deptNameAttr": "dept_name2",
                "day": date,
                "dateFormat": dateFormat
            },
            error : function(request) {
                $.modal.alertError("系统错误");
            },
            success : function(data) {

                setTop10Chart(data);
            }
        });
    }

    function do_query_daykl() {
        var date = $.common.dateFormat(new Date(), "yyyy-MM-dd");
        var deptId = $(window.parent.document).find("select[name='deptId']").val();
        $.ajax({
            cache: true,
            type: "POST",
            url: ctx + "sts/data/detail/statistic",
            data: {
                "day": date,
                "deptId2": deptId,
                "dateFormat": "%Y-%m-%d %H:00:00"
            },
            error: function (request) {
                $.modal.alertError("系统错误");
            },
            success: function (data) {
                $("#daykl").addClass("label-primary");
                $("#monthkl").removeClass("label-primary");
                setBarChart(data);
            }
        });
    }

    function do_query_monthkl() {
        var date = $.common.dateFormat(new Date(), "yyyy-MM");
        var deptId = $(window.parent.document).find("select[name='deptId']").val();
        $.ajax({
            cache: true,
            type: "POST",
            url: ctx + "sts/data/detail/statistic",
            data: {
                "month": date,
                "deptId2": deptId,
                "dateFormat": "%Y-%m-%d"
            },
            error: function (request) {
                $.modal.alertError("系统错误");
            },
            success: function (data) {
                $("#monthkl").addClass("label-primary");
                $("#daykl").removeClass("label-primary");
                for (var i = 0; i < data.length; i++) {
                    var it = data[i];
                    it.startTime = it.startTime.substring(0, 10);
                }
                setBarChartMonth(data);
            }
        });
    }

    function do_query_dayhx() {
        var date = $.common.dateFormat(new Date(), "yyyy-MM-dd");
        var deptId = $(window.parent.document).find("select[name='deptId']").val();
        $.ajax({
            cache: true,
            type: "POST",
            url: ctx + "sts/data/detail/statistic",
            data: {
                "day": date,
                "deptId2": deptId,
                "dateFormat": "%Y-%m-%d %H:00:00"
            },
            async: false,
            error: function (request) {
                $.modal.alertError("系统错误");
            },
            success: function (data) {
                $("#dayhx").addClass("label-primary");
                $("#monthhx").removeClass("label-primary");
                setHx1Chart(data);
                setHx2Chart(data);
            }
        });
    }

    function do_query_monthhx() {
        var date = $.common.dateFormat(new Date(), "yyyy-MM");
        var deptId = $(window.parent.document).find("select[name='deptId']").val();
        $.ajax({
            cache: true,
            type: "POST",
            url: ctx + "sts/data/detail/statistic",
            data: {
                "deptId2": deptId,
                "month": date,
                "dateFormat": "%Y-%m-01 %H:00:00"
            },
            error: function (request) {
                $.modal.alertError("系统错误");
            },
            success: function (data) {
                $("#monthhx").addClass("label-primary");
                $("#dayhx").removeClass("label-primary");
                setHx1Chart(data);
                setHx2Chart(data);
            }
        });
    }

    function setTop10Chart(data) {
        var deptNames = Array(10).fill('');
        var inData = Array(deptNames.length).fill(0);
        var inNumTotal = 0;
        for (var i = 0; i < data.length; i++) {
            var it = data[i];
            inNumTotal = inNumTotal + it.inNum;
            inData[9-i] = it.inNum;
            deptNames[9-i] = data[i].deptName2;

        }
        var option = {
            tooltip: {
                trigger: 'axis'
            },
            grid: {
                left: 50,
            },
            calculable: true,
            yAxis: [
                {
                    type: 'category',
                    data: deptNames,
                    axisLabel: {
                        rotate: 45, // 标签旋转 45 度
                        align: 'right', // 文字对齐方式（旋转后对齐调整）
                        verticalAlign: 'middle', // 垂直对齐方式
                        // 可添加样式（如字体大小、颜色）
                        textStyle: {
                            fontSize: 10
                        }
                    },
                    nameLocation: 'center',
                    nameGap: 40 // 标题与轴的距离
                }
            ],
            xAxis: [
                {
                    name: '人次',
                }
            ],
            series: [
                {   barMaxWidth: 30,
                    name: '去重后客流',
                    type: 'bar',
                    data: inData,
                    label: {
                        show: true,        // 启用数值显示
                        position: 'right',   // 标签位置（top/right/inside等）
                        color: '#333'      // 文字颜色
                    }
                }
            ]
        };
        top10Chart.clear();
        top10Chart.setOption(option);

        window.onresize = top10Chart.resize;
    }

    function setBarChart(data) {
        var inData = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
        var outData = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
        var passData = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
        var inNumTotal = 0;
        for (var i = 0; i < data.length; i++) {
            var it = data[i];
            inNumTotal = inNumTotal + it.inNum;
            var indexString = it.startTime.substring(11, 13);
            var index = Number(indexString);
            inData[index] = it.inNum;
            outData[index] = it.outNum;
            passData[index] = it.passNum;
        }
        var option = {
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['经过客流', '进入客流', '离开客流']
            },
            grid: {
                left: 50,
                right: 10,
                bottom: 20
            },
            calculable: true,
            xAxis: [
                {
                    type: 'category',
                    data: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11',
                        '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23']
                }
            ],
            yAxis: [
                {
                    name: '人次',
                    nameLocation: 'center',
                    nameRotate: 90,
                    nameTextStyle: {
                        color: '#666',
                        verticalAlign: 'middle',
                        align: 'right'
                    },
                    nameGap: 30
                }
            ],
            series: [
                {
                    name: '经过客流',
                    type: 'line',
                    data: passData
                },
                {
                    name: '进入客流',
                    type: 'line',
                    data: inData
                },
                {
                    name: '离开客流',
                    type: 'line',
                    data: outData
                }
            ]
        };
        barChart.clear();
        barChart.setOption(option);

        window.onresize = barChart.resize;
    }

    function setBarChartMonth(data) {
        var currentMonthRange = getCurrentMonthDates();
        var dayRange = [];
        for (var i = 0; i < currentMonthRange.length; i++) {
            dayRange.push(i + 1);
        }
        var inData = Array(currentMonthRange.length).fill(0);
        var outData = Array(currentMonthRange.length).fill(0);
        var passData = Array(currentMonthRange.length).fill(0);
        var inNumTotal = 0;
        for (var i = 0; i < data.length; i++) {
            var it = data[i];
            inNumTotal = inNumTotal + it.inNum;
            var index = currentMonthRange.indexOf(it.startTime);
            inData[index] = it.inNum;
            outData[index] = it.outNum;
            passData[index] = it.passNum;
        }
        var option = {
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['经过客流', '进入客流', '离开客流']
            },
            grid: {
                left: 50,
                right: 10,
                bottom: 20
            },
            calculable: true,
            xAxis: [
                {
                    type: 'category',
                    data: dayRange
                }
            ],
            yAxis: [
                {
                    name: '人次',
                    nameLocation: 'center',
                    nameRotate: 90,
                    nameTextStyle: {
                        color: '#666',
                        verticalAlign: 'middle',
                        align: 'right'
                    },
                    nameGap: 30
                }
            ],
            series: [
                {
                    name: '经过客流',
                    type: 'line',
                    data: passData
                },
                {
                    name: '进入客流',
                    type: 'line',
                    data: inData
                },
                {
                    name: '离开客流',
                    type: 'line',
                    data: outData
                }
            ]
        };
        barChart.clear();
        barChart.setOption(option);

        window.onresize = barChart.resize;
    }

    function setHx1Chart(data) {

        var manNumTotal = 0;
        var womanNumTotal = 0;
        var unknownSexNumTotal = 0;
        for (var i = 0; i < data.length; i++) {
            var it = data[i];
            manNumTotal = manNumTotal + it.manNum;
            womanNumTotal = womanNumTotal + it.womanNum;
            unknownSexNumTotal = unknownSexNumTotal + it.unknownSexNum;
        }

        var option = {
            title: {
                text: '男女分布',
                left: 'center',    // 水平居中
                bottom: 0,
                textStyle: {
                    fontSize: 12,
                },
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                left: 'center'
            },
            series: [
                {
                    name: '总人次',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    avoidLabelOverlap: false,
                    itemStyle: {
                        borderRadius: 10,
                        borderColor: '#fff',
                        borderWidth: 2
                    },
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: 40,
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: [
                        {value: manNumTotal, name: '男性'},
                        {value: womanNumTotal, name: '女性'},
                        {value: unknownSexNumTotal, name: '未知'}
                    ]
                }
            ]
        };
        hx1Chart.clear();
        hx1Chart.setOption(option);
        $(window).resize(hx1Chart.resize);
    }

    function setHx2Chart(data) {

        var childNumTotal = 0;
        var juvenileNumTotal = 0;
        var teenagerTotal = 0;
        var youthNumTotal = 0;
        var adultNumTotal = 0;
        var middleNumTotal = 0;
        var elderlyNumTotal = 0;
        var seniorNumTotal = 0;
        var unknownAgeNumTotal = 0;
        for (var i = 0; i < data.length; i++) {
            var it = data[i];
            childNumTotal = childNumTotal + it.childNum;
            juvenileNumTotal = juvenileNumTotal + it.juvenileNum;
            teenagerTotal = teenagerTotal + it.teenager;
            youthNumTotal = youthNumTotal + it.youthNum;
            adultNumTotal = adultNumTotal + it.adultNum;
            middleNumTotal = middleNumTotal + it.middleNum;
            elderlyNumTotal = elderlyNumTotal + it.elderlyNum;
            seniorNumTotal = seniorNumTotal + it.seniorNum;
            unknownAgeNumTotal = unknownAgeNumTotal + it.unknownAgeNum;

        }

        var option = {
            title: {
                text: '年龄分布',
                left: 'center',    // 水平居中
                bottom: 0,
                textStyle: {
                    fontSize: 12,
                },
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                left: 'center'
            },
            series: [
                {
                    name: '总人次',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    avoidLabelOverlap: false,
                    itemStyle: {
                        borderRadius: 10,
                        borderColor: '#fff',
                        borderWidth: 2
                    },
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: 40,
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: [
                        {name: '儿童', value: childNumTotal},
                        {name: '少年', value: juvenileNumTotal},
                        {name: '青少年', value: teenagerTotal},
                        {name: '青年', value: youthNumTotal},
                        {name: '壮年', value: adultNumTotal},
                        {name: '中年', value: middleNumTotal},
                        {name: '中老年', value: elderlyNumTotal},
                        {name: '老年', value: seniorNumTotal},
                        {name: '未知年龄', value: unknownAgeNumTotal}
                    ]
                }
            ]
        };
        hx2Chart.clear();
        hx2Chart.setOption(option);
        $(window).resize(hx2Chart.resize);
    }

</script>
</body>
</html>
